body{
    background-color: #ffffff;
    width: 100%;
}
/*未被访问的链接link*/
a:link {
    text-decoration: none;
}
/*首页，博客，关于我们*/
.header {
    width: 100%;
    background-color: #252A2F;
    height: 240px;
    display: inline-block;
}
.header_left {
    display: inline-block;
    margin-left: 200px;
}
.header_right {
    display: inline-block;
    margin-left: 200px;
    vertical-align: top;
    /*margin-top: 20px;*/
}
.top_nav li a {
    color: #ffffff;
}
.top_nav li.blog,li:hover{
    background-color: #9B30FF;
}
.start{
    display: inline-block;
    font-size: 20px;/*设置字体大小*/
    padding: 14px 14px;
}
.about_us {
    display: inline-block;
    font-size: 20px;/*设置字体大小*/
    padding: 14px 14px;
    margin-left: 2px;
}
.blog {
    display: inline-block;
    font-size: 20px;/*设置字体大小*/
    padding: 14px 14px;
    margin-left: 2px;
}
/*登陆注册*/
.sign-ligin-btns {
    display: inline-block;
    vertical-align: top;
}
.sign-ligin-btns li a{
    color: #ffffff;
}
.login {
    display: inline-block;
    font-size: 20px;/*设置字体大小*/
    padding: 14px 14px;
    margin-left: 2px;
}
.register {
    display: inline-block;font-size: 20px;/*设置字体大小*/
    padding: 14px 14px;
    margin-left: 2px;
}


.welcome {
    background-color: #BF3EFF;
    height: 65px;
    font-size: 35px;
    padding-left: 520px;
    padding-top: 30px;
    color: #ffffff;
}

.left {
    margin-left: 200px;
    margin-top: 60px;
    color: #000;
    display: inline-block;
}
.left a img{
    margin-top: 20px;
}
.left p{
    width: 590px;
    margin-top: 30px;
}
.right {
    display: inline-block;
    vertical-align: top;
    margin-left: 50px;
    margin-top: 80px;
    width: 360px;

}
.search input{
    width: 300px;
    height: 30px;
    font-size: 14px;
    padding-left: 20px;
}
.search h2{
    margin-top: 40px;
}
.search_line {
   display: inline-block;
}
.search_logo {
   display: inline-block;
   vertical-align: top;
}
.lxwomen1 {
    display: inline-block;
}
.lxwomen2{
    display: inline-block;
    margin-left: 30px;
}
.lxwomen3 {
    display: inline-block;
    margin-left: 30px;
}
.email {
    margin-top: 50px;
}
.button {
    margin-top:15px;
}
.button input {
    background-color: #BF3EFF;
    width: 100px;
    color: #ffffff;
}

.list li:before {
    content: counter(listxh);
    background-color: #444;
    margin-right: 5px;
    padding: 2px 5px;
    color: #ffffff;
}
.list li {
    counter-increment: listxh;
    vertical-align: bottom;
    display: inline-block;
    width: 100%;
    white-space: nowrap;/*设置为不换行*/
    overflow: hidden;/*超出部分裁剪掉*/
    text-overflow: ellipsis;/*超出部分用点点表示*/
    margin-top: 16px;
}


.about {
    background-color: #BF3EFF;
    height: 200px;
    width: 100%;
}
.container{
    margin: 4% auto;
    width: 210px;
    height: 140px;
    position: relative;
    perspective: 1000;
}
#carousel{
    width: 100%;
    height: 100%;
    position: absolute;
    transform-style: preserve-3d;
    animation: rotation 20s infinite linear;
}
#carousel:hover{
    animation-play-state: paused;
}
#carousel figure{
    display: block;
    position: absolute;
    width: 186px;
    height: 116px;
    left: 10px;
    top: 10px;
    background: black;
    overflow: hidden;
    border: solid 5px black;
}
#carousel figure:nth-child(1){transform: rotateY(0deg) translateZ(320px);}
#carousel figure:nth-child(2) { transform: rotateY(40deg) translateZ(320px);}
#carousel figure:nth-child(3) { transform: rotateY(80deg) translateZ(320px);}
#carousel figure:nth-child(4) { transform: rotateY(120deg) translateZ(320px);}
#carousel figure:nth-child(5) { transform: rotateY(160deg) translateZ(320px);}
#carousel figure:nth-child(6) { transform: rotateY(200deg) translateZ(320px);}
#carousel figure:nth-child(7) { transform: rotateY(240deg) translateZ(320px);}
#carousel figure:nth-child(8) { transform: rotateY(280deg) translateZ(320px);}
#carousel figure:nth-child(9) { transform: rotateY(320deg) translateZ(320px);}

img{
    -webkit-filter: grayscale(1);
    cursor: pointer;
    transition: all .5s ease;
}
img:hover{
    -webkit-filter: grayscale(0);
    transform: scale(1.2,1.2);
}

@keyframes rotation{
    from{
        transform: rotateY(0deg);
    }
    to{
        transform: rotateY(360deg);
    }
}


